<template>
  <div class="curriculum">
    <van-tabs v-model="active" swipeable>
      <van-tab title="全部订单">
        <div class="curriculum-image">
          <img src="/课程.png" />
          <p>暂无订单</p>
        </div>
      </van-tab>
      <van-tab title="待支付">
        <div class="curriculum-image">
          <img src="/课程.png" />
          <p>暂无订单</p>
        </div></van-tab
      >
      <van-tab title="已完成">
        <div class="curriculum-image">
          <img src="/课程.png" />
          <p>暂无订单</p>
        </div></van-tab
      >
      <van-tab title="已取消">
        <div class="curriculum-image">
          <img src="/课程.png" />
          <p>暂无订单</p>
        </div></van-tab
      >
    </van-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
};
</script>
<style lang="scss">
.curriculum {
  height: 162vw;
  background-color: #f0f2f5;
}
.curriculum-image {
  width: 100%;
  text-align: center;
  img {
    width: 3rem;
    margin: 0 auto;
    display: block;
  }
  p {
    margin-top: 1rem;
  }
}
</style>